<template>
  <div class="categories">
    <a-page-header
      title="分类管理"
      sub-title="商品分类层级管理"
    >
      <template #extra>
        <a-button type="primary">
          <PlusOutlined />
          新增分类
        </a-button>
      </template>
    </a-page-header>

    <a-card>
      <a-tree
        :tree-data="categoryTree"
        :default-expanded-keys="['0-0']"
        show-line
        :show-icon="false"
      >
        <template #title="{ title, key }">
          <span>{{ title }}</span>
          <a-space style="margin-left: 8px;">
            <a-button type="link" size="small">编辑</a-button>
            <a-button type="link" size="small">添加子分类</a-button>
            <a-button type="link" size="small" danger>删除</a-button>
          </a-space>
        </template>
      </a-tree>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

const categoryTree = ref([
  {
    title: '生鲜食品',
    key: '0-0',
    children: [
      {
        title: '水果',
        key: '0-0-0',
        children: [
          { title: '苹果', key: '0-0-0-0' },
          { title: '香蕉', key: '0-0-0-1' },
          { title: '橙子', key: '0-0-0-2' },
        ],
      },
      {
        title: '蔬菜',
        key: '0-0-1',
        children: [
          { title: '叶菜类', key: '0-0-1-0' },
          { title: '根茎类', key: '0-0-1-1' },
        ],
      },
    ],
  },
  {
    title: '日用品',
    key: '0-1',
    children: [
      { title: '洗护用品', key: '0-1-0' },
      { title: '清洁用品', key: '0-1-1' },
    ],
  },
])
</script>

<style scoped>
.categories {
  padding: 24px;
}
</style>